<template>
  <div class="hobby-module">
    <div class="module-title">
      <span>技能</span>
      <i class=" jl_font">&#xe620;</i>
    </div>
    <div class="edit-box">
      <el-row :gutter="10">
        <el-col :span="24">
           <div class="form_groun">
              <label class="label right">技能</label>
              <el-input v-model="inputValue" ref="saveTagInput" @keyup.enter.prevent.stop.native="handleInputConfirm"></el-input>
            </div>
        </el-col>
      </el-row>
      <el-row v-for="(item,index) in dynamicTags" :key="'skillItem'+index">
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <div class="el-input skill-name">
            <div class="el-form-item">{{item.name}}</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <el-select v-model="item.leave" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <div class="skill-action-box">
            <span @click="deleteSkill(index)">删除</span>
          </div>
        </el-col>
      </el-row>
      <div class="save-btn-main">
        <el-row :gutter='10'>
          <el-col :span="24">
            <el-button type="primary" @click="submitForm">保存</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { saveResumeSkill } from 'api'
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      dynamicTags: this.value,
      inputVisible: false,
      inputValue: '',
      options: [
        {
          value: '1',
          label: '初学'
        },
        {
          value: '2',
          label: '一般'
        },
        {
          value: '3',
          label: '精通'
        },
        {
          value: '4',
          label: '熟练'
        },
        {
          value: '5',
          label: '大师'
        }
      ]
    };
  },
  mounted() {
    console.log('进入hobby');
  },
  methods: {
    handleInputConfirm(e) {
      if (e) e.preventDefault()
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push({
          name: inputValue,
          leave: 3 + ""
        });
      }
      this.inputValue = '';
      return false;
    },
    deleteSkill(idx) {
      this.dynamicTags.splice(idx, 1);
    },

    submitForm() {
      this.$promise.post(saveResumeSkill, { skill: this.dynamicTags }).then(resp => {
        if (resp.status == 1) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.hobby-module {
  background: #fff;
  color: #000;
  .input-new-tag {
    width: 78px;
    margin-left: 10px;
    vertical-align: bottom;
    height: 24px;
    line-height: 22px;
  }
  .skill-name {
    line-height: 1;
    font-size: 14px;
    padding: 11px 12px 11px;
  }
  .skill-action-box {
    line-height: 1;
    font-size: 14px;
    padding: 11px 12px 11px;
    span {
      cursor: pointer;
      &:hover {
        color: red;
      }
    }
  }
  .save-btn-main {
    margin-top: 20px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 24px;
    line-height: 22px;
    padding-top: 0;
    padding-bottom: 0;
  }
}
</style>
